<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>学习</title>
</head>

<body>
  <canvas id="c2d" class="c2d" width="1000" height="500"></canvas>
  <script type="module">
    // 官网地址
    import * as THREE from 'https://threejs.org/build/three.module.js'
    import { OrbitControls } from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/controls/OrbitControls.js'
    const canvas = document.querySelector('#c2d')
    // 渲染器
    const renderer = new THREE.WebGLRenderer({ canvas })
    // 开启阴影渲染
    renderer.shadowMap.enabled = true

    const fov = 40 // 视野范围
    const aspect = 2 // 相机默认值 画布的宽高比
    const near = 0.1 // 近平面
    const far = 1000 // 远平面
    // 透视投影相机
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)

    // 相机位置 正下方向下看
    camera.position.set(0, 50, 0) // 相机位置
    camera.up.set(0, 0, 1)
    camera.lookAt(0, 0, 0) // 相机朝向

    // 创建场景
    const scene = new THREE.Scene()

    {
      // 灯光
      const color = 0xffffff
      const intensity = 2
      // 创建光源
      const light = new THREE.DirectionalLight(color, intensity)
      light.castShadow=true // 投射阴影
      light.position.set(10,10,10)
      light.target.position.set(-4,0,-4)
      // 光源 加入场地
      scene.add(light)
      scene.add(light.target)

      const helper=new THREE.DirectionalLightHelper(light)
      scene.add(helper)
    }

    {
      // 平面几何
      const groundGeometry=new THREE.PlaneGeometry(50,50)
      const groundMaterial=new THREE.MeshPhongMaterial({color:0xcc8866,side:THREE.DoubleSide})
      const groundMesh=new THREE.Mesh(groundGeometry,groundMaterial)
      groundMesh.rotation.x=Math.PI*-0.5
      groundMesh.receiveShadow=true // 接受阴影
      scene.add(groundMesh)
    }
    {
      // 几何体
      const cubeSize=4
      const cubeGeo=new THREE.BoxGeometry(cubeSize,cubeSize,cubeSize)
      const cubeMat=new THREE.MeshPhongMaterial({color:'#8AC'})
    }

    function render(time) {
      time *= 0.001

      // 加载渲染器
      renderer.render(scene, camera)

      // 开始动画
      requestAnimationFrame(render)

    }
    // 开始渲染
    requestAnimationFrame(render)
  </script>
</body>

</html>